import {
  CMEVENTS
} from '@amcax/base'
import {
  userEvents
} from '@app-cad/module';
import { ModelEventType } from '@app-nextmesh/types';
import { events } from '@app-nextmesh/utils';
import { Box, Typography } from '@mui/material';
import { Col, Slider, InputNumber, Row } from 'antd';
import { useEffect, useState } from 'react';

const MIN = -1,
  MIN2 = 0,
  MAX = 1,
  STEP = 0.01;

const width = 330;
function InputSlider({
  label,
  value,
  setValue,
  min = MIN,
}: {
  label: string;
  value: number;
  setValue: (value: number) => void;
  min?: number;
}) {
  const handleChange = (newValue: number | number[]) => {
    setValue(newValue as number);
  };
  const handleInputChange = (newValue: number) => {
    if (isNaN(newValue)) {
      newValue = 0;
    }
    if (value < min) {
      setValue(min);
    } else if (value > MAX) {
      setValue(MAX);
    } else {
      setValue(newValue);
    }
  };
  return (
    <>
      <Row>
        <Col span={4}>
          <Typography gutterBottom>{label}</Typography>
        </Col>
        <Col span={12}>
          <Slider
            step={STEP}
            min={min}
            max={MAX}
            onChange={handleChange}
            value={value}
          />
        </Col>
        <Col span={4}>
          <InputNumber
            step={STEP}
            min={min}
            max={MAX}
            style={{ margin: '0 16px' }}
            value={value}
            onChange={handleInputChange}
          />
        </Col>
      </Row>
    </>
  );
}
export default function ClipPanel() {
  const defaultValue = { x: 0, y: -1, z: 0, c: 0.5 };
  const [clippingValue, setClippingValue] = useState(defaultValue);
  const handleInputChange = (name: string, value: number) => {
    const newValue = { ...clippingValue, [name]: value };
    setClippingValue(newValue);
    events.emit(ModelEventType.ClippingChange, newValue);
  };
  useEffect(() => {
    userEvents.emit(CMEVENTS.RIGHT_PANEL_TOGGLE, { open: true, width });
    return () => {
      userEvents.emit(CMEVENTS.RIGHT_PANEL_TOGGLE, { open: false, width });
    };
  }, []);
  useEffect(() => {
    events.emit(ModelEventType.ClippingChange, defaultValue);
    return () => {
      // 重置clipping
      events.emit(ModelEventType.ClippingChange, null);
    };
  }, []);
  return (
    <div
      className='nm-sceneTree nm-appFrame-panel'
      style={{ width: width }}>
      <Box sx={{ m: 1 }}>
        <Typography
          sx={{ fontWeight: 'bold' }}
          gutterBottom>
          切面属性
        </Typography>
        <InputSlider
          min={MIN2}
          label='位置'
          value={clippingValue.c}
          setValue={(value) => handleInputChange('c', value)}
        />
        <Typography gutterBottom>方向</Typography>
        <InputSlider
          label='X'
          value={clippingValue.x}
          setValue={(value) => handleInputChange('x', value)}
        />
        <InputSlider
          label='Y'
          value={clippingValue.y}
          setValue={(value) => handleInputChange('y', value)}
        />
        <InputSlider
          label='Z'
          value={clippingValue.z}
          setValue={(value) => handleInputChange('z', value)}
        />
      </Box>
    </div>
  );
}
